<template>
  <div class="container">
    <div class="help">
      <el-input placeholder="" size="mini" v-model.number="position.distance" style="width: 100px;"></el-input>
      <el-button type="success" size="mini" @click="scan">Scan</el-button>
      <el-button type="success" size="mini" @click="addPoint">Add share point</el-button>
      <el-button type="success" size="mini" @click="setCenter">Set center point</el-button>

    </div>
    <div id="map"></div>
  </div>
</template>
<script>
import { map } from '@/utils'
import { GetPointShareAPI, UploadSharePointAPI } from '@/api'
export default {
  data() {
    return {
      map: null,

      position: {
        lng: 0,
        lat: 30,
        distance: 100000,
        zoom: 2
      },

    }
  },
  methods: {
    async addPoint() {
      this.map.onmousemove(async (e) => {
        this.map.addPoint(e.latlng)
      })
      this.map.onclick(async (e) => {
        let json = {
          name: 'default',
          detail: 'default',
          longitude: e.latlng.lng,
          latitude: e.latlng.lat,
        }
        let { data } = await UploadSharePointAPI(json)

        this.map.marker(data.point)
        this.cancel()
      })
    },
    scan() {
      this.map.onmousemove(async (e) => {
        this.map.scan(e.latlng, this.position.distance)
      })
      // Search for nearby points
      this.map.onclick(async (e) => {
        this.scanPoint(e.latlng.lng, e.latlng.lat)
      })
    },
    async scanPoint(lng, lat) {
      let { data } = await GetPointShareAPI({
        longitude: lng,
        latitude: lat,
        distance: this.position.distance
      })
      if (data.points.length != 0) {
        this.$notify({ title: `Find ${data.points.length} nearby sharing points` })
        data.points.forEach(point => {
          this.map.marker(point)
        });
      } else {
        this.$notify({ title: 'There are no shared points nearby' })
      }
    },
    // Set center point
    setCenter() {
      this.map.onmousemove(async (e) => {
        this.map.setCenter(e.latlng)
      })

      // Search for nearby points
      this.map.onclick(async (e) => {
        this.$notify({ title: 'Complete setting the center point' })
        let latlng = this.map.map.getCenter()
        window.localStorage.setItem('map_lng', latlng.lng)
        window.localStorage.setItem('map_lat', latlng.lat)
        window.localStorage.setItem('map_zoom', this.map.map.getZoom())
        this.cancel()
      })
    },
    cancel() {
      this.map.cancel()
    }
  },
  mounted() {
    // Read initial data
    let lng = window.localStorage.getItem('map_lng') || this.position.lng
    let lat = window.localStorage.getItem('map_lat') || this.position.lat
    let zoom = window.localStorage.getItem('map_zoom') || this.position.zoom
    if (lng && lat) {
      this.scanPoint(lng, lat)
    }

    this.map = new map('map', [lat, lng], zoom)
    this.map.reset()

    this.map.map.on('contextmenu', (e) => {
      this.cancel()
    })

    // Update Geographic Information
    // this.map.map.on('move', (e) => {
    // let latlng = this.map.map.getCenter()
    // window.localStorage.setItem('map_lng', latlng.lng)
    // window.localStorage.setItem('map_lat', latlng.lat)
    // window.localStorage.setItem('map_zoom', this.map.map.getZoom())
    // })
  },
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}

.help {
  height: 40px;
}

#map {
  width: 100%;
  height: calc(100% - 40px);
}
</style>

<style>
.icon {}
</style>